/* 直接书写的规则 */
*{
    margin: 0;
    padding: 0;
}
/* 下面是表格样式 */
        ul{
            text-align: center;
            list-style: none;
            width:480px ;
            height: 660px;
            padding-top: 5px;
            padding-right: 5px;
            background-color: rgb(59, 59, 59);
        }
        ul li{
            float: left;
            text-align: center;
            font: 16px/100px "arial";
            width: 150px;
            height: 100px;
            margin:5px;
            background-color: rgb(226, 226, 226);
        }
        div{
            margin: 20px;
        }
.biaoti{
    font-family: "Arial", "微软雅黑";
    font-size: 26px;
    color: rgb(31, 85, 201);
}
/* 文字样式 */
p{
    font-family: "Arial", "微软雅黑";
    font-size: 20px;
    color: black;
    margin-top: 2px;
}
/* 盒子样式 */
.box1{
    display: block;
    width: 200px;
    height: 200px;
    margin: 30px auto;
    background-color: aqua;
}
.box2{
    width: 200px;
    height: 200px;
    position:relative;
    left:50%;
    margin-left:-100px;
    background-color:blue;
}
.box3{
    display: block;
    position: relative;
    width: 1000px;
    height: 1000px;
    margin: 20px auto;
    background-color: honeydew;
}
.animation{
    position: absolute;
    top:0;
    display: block;
    width: 200px;
    height: 200px;
    background-color: green;
    animation: move 5s linear infinite;
}
@keyframes move{
    0%{
        transform:translateX(0);
    }
    25%{
        transform:translateX(500px);
    }
    50%{
        transform:translate(500px,500px);
    }
    75%{
        transform:translateY(500px);
    }
    100%{
        transform:translateY(0);
    }
}